<template>
  <yy-page custom-class="page">
    <view class="choice-area-page pageBgColor">
      <!-- 搜索城市 -->
      <view class="city-search">
        <zm-input
          type="text"
          placeholder="输入城市名或拼音查询"
          class="input"
          :clearable="false"
          :icon-size="'26'"
          :custom-style="{
            background: '#fff',
            border: 'none',
            width: showSearchResult ? '670rpx' : '520rpx',
            height: '48rpx',
            borderRadius: '20rpx'
          }"
          :placeholder-style="{ color: '#999', fontSize: '28rpx' }"
          :prefix-icon="'search'"
          v-model="searchValue"
          :oss-url="false"
          @input="onInput"
        />
        <view class="search-cancel" v-if="!showSearchResult" @click="handleSearchCancel"> 取消 </view>
      </view>
      <!-- 滚动区域 -->
      <scroll-view class="w100 city-list" scroll-y :class="extClass" :scroll-into-view="scrollIntoId" v-if="!hasNoData" @touchmove.stop.prevent>
        <!-- 快捷定位 -->
        <view class="home-wrap" v-if="showSearchResult">
          <!-- 定位城市 -->
          <view class="city-dw" v-if="disdingwei">
            <view class="title padT20"> 定位城市 </view>
            <view class="flex-s-m">
              <view class="dw-item">
                <block-area
                  :is-actived="isActived(loctionAreaInfo)"
                  :block-key="'regionName'"
                  error-tip="定位失败"
                  :info="loctionAreaInfo"
                  @myTap="chooseArea(loctionAreaInfo)"
                ></block-area>
              </view>
              <u-icon name="reload" color="#AFAFAF" size="23" style="margin-left: 18rpx" @click="getAreaInfo"></u-icon>
            </view>
          </view>
          <!-- 历史城市 -->
          <view class="city-dw" v-if="historicCity.length > 0">
            <view class="title"> 历史城市 </view>
            <view class="history-result flex-w flex-s-m">
              <block-area
                v-for="(item, index) in historicCity"
                class="item mb25 mr20"
                :is-actived="isActived(item)"
                :block-key="'regionName'"
                :info="item"
                :key="index"
                @myTap="chooseArea(item)"
              ></block-area>
            </view>
          </view>
          <!-- 热门城市 -->
          <view class="city-dw" v-if="hotCity.length > 0">
            <view class="title"> 热门城市 </view>
            <view class="hotCity-result flex-w flex-s-m">
              <block-area
                v-for="(item, index) in hotCity"
                class="item mb25 mr20"
                :is-actived="isActived(item)"
                :block-key="'regionName'"
                :info="item"
                :key="index"
                @myTap="chooseArea(item)"
              ></block-area>
            </view>
          </view>
        </view>
        <!-- 城市列表 -->
        <view class="city-list-box home-wrap" v-if="showSearchResult">
          <view v-for="item in cityGroups" class="city-item flex-s-m" :id="item.initials" :key="item.initials">
            <view class="letter-header bold">
              <text class="item">
                {{ item.initials }}
              </text>
            </view>
            <block-area
              v-for="(city, i) in item['children']"
              class="block-area-item mb25 mr20"
              :is-actived="isActived(city)"
              :key="i"
              :block-key="'regionName'"
              :info="city"
              @myTap="chooseArea(city)"
            ></block-area>
          </view>
        </view>
        <!-- 搜索结果 -->
        <view class="search-result flex-w flex-s-m" v-if="searchList.length > 0">
          <block-area
            v-for="(item, index) in searchList"
            class="item mb25 mr20"
            :is-actived="isActived(item)"
            :block-key="'regionName'"
            :info="item"
            :key="index"
            @myTap="chooseArea(item)"
          ></block-area>
        </view>
        <!-- 右侧字母 -->
        <view class="letters" id="list" v-if="showSearchResult" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
          <view class="fmin" v-for="(item, index) in initialsList" :key="index" @click="handelTouch(item)">{{ item }}</view>
        </view>
      </scroll-view>
      <!-- 选中之后字母 -->
      <view class="mask" v-if="touchmove">
        <view class="mask-r bold">{{ scrollIntoId }}</view>
      </view>
      <!-- 无数据 -->
      <view class="search-noData flex-col flex-s-m" v-if="hasNoData">
        <zm-image :src="'/noData-city.png'" is-join custom-style="width:350rpx;height:284rpx"></zm-image>
        <text class="tip">未找到相关的城市哦 </text>
      </view>
    </view>
  </yy-page>
</template>
<script>
  import ZmImage from '@/commons/ZmImage/index.vue'
  import ZmInput from '@/commons/ZmInput/index.vue'
  import BlockArea from '@/subPages/components/BlockArea'
  import choiceArea from '@/mixins/choiceArea'
  export default {
    name: 'choice-area',
    components: { ZmInput, BlockArea, ZmImage },
    mixins: [choiceArea],
    created() {
      this.init()
    },
    data() {
      return {
        winHeight: 0,
        itemHeight: 0,
        winOffsetY: 0,
        touchmove: false,
        // scrollHeight: uni.getSystemInfoSync().windowHeight + 'rpx',

        letter: [],

        searchValue: '',
        scrollIntoId: '',
        list: [],
        searchList: [],
        disdingwei: true,
        // cacheLocation: '', //最近访问
        cityList: []
      }
    },
    onShow() {},
    onLoad(options) {
      // this.scrollHeight = '724rpx'
      // console.log(
      //   'uni.getSystemInfoSync().windowHeight',
      //   uni.getSystemInfoSync().windowHeight
      // )
      // this.scrollHeight =
      //   uni.getSystemInfoSync().windowHeight - parseInt(this.customBar) + 'px'
    },
    computed: {
      hasNoData() {
        if (this.searchValue === '') {
          //非搜索下
          if (this.cityList.length === 0) {
            return true
          }
        } else {
          //搜索下
          if (this.dataList.length === 0) {
            return true
          }
        }
        return false
      },
      showSearchResult() {
        return this.searchValue === ''
      },
      extClass() {
        return this.searchList.length > 0 ? 'hasSearchResult' : ''
      },
      dataList() {
        //搜索结果
        const search = this.searchValue.toLocaleLowerCase()
        return this.cityList.filter((i) => i.regionName.includes(search) || i.regionNamePy.includes(search))
      },
      // 城市首字母
      initialsList() {
        const list = (this.dataList.length > 0 && this.dataList.map((i) => i.initials)) || []
        return this.$utils.deDup(list).sort()
      },
      // 热门城市
      hotCity() {
        return this.dataList.filter((i) => i.isHot === 1)
      },
      // 分组城市列表
      cityGroups() {
        const arr = []
        if (this.initialsList && this.initialsList.length > 0) {
          this.initialsList.forEach((item) => {
            arr.push({
              initials: item,
              children: this.dataList.filter((i) => i.initials === item)
            })
          })
        }
        return arr
      },
      // 定位城市
      loctionAreaInfo() {
        return this.$auth.getLoctionAreaInfo()
      },
      // 本地选中的城市
      areaInfo() {
        return this.$auth.getChooseAreaInfo()
      }
    },
    methods: {
      init() {
        //#ifdef H5
        this.safeBottom = 0
        //#endif
        this.initHistoricCity() //获取历史城市
        this.getCityList() //获取城市列表
      },
      getCityList() {
        uni.$api.cinema.cityList().then((data) => {
          this.cityList = data
          this.deDupHistoricCity()
        })
      },
      touchStart() {
        this.touchmove = true
      },
      touchMove(e) {},
      touchEnd() {
        this.touchmove = false
      },
      handelTouch(item) {
        this.scrollIntoId = item
      },
      onInput(value) {
        if (value !== '' && this.dataList.length > 0) {
          this.searchList = this.dataList
          this.disdingwei = false
        } else {
          this.searchList = []
          this.disdingwei = true
        }
      },
      async chooseArea(item, hasLocation = false) {
        console.log(item, '=========')
        // if (this.$auth.getBaseSetAllCity().indexOf(item.cityId) === -1) {
        //   console.log('选择的城市没有影院，默认用接口返回的22')
        //   this.$msg.toast('当前城市没有影院')
        //   return false
        // }
        await this.$auth.saveChooseAreaInfo(item)
        this.$auth.toGetCinemaInfo(true, 'save').then(() => {
          this.$tools.navigateTo(-1)
        })
      },
      getAreaInfo() {
        this.$auth.getAreaInfo(true)
      },
      // 去重复
      deDupHistoricCity() {
        let historicCity = this.historicCity
        const cityIds = this.cityList.map((i) => i.cityId)
        historicCity = historicCity.filter((i) => cityIds.includes(i.cityId))
        this.historicCity = historicCity
        this.saveHistoricCity()
      },
      isActived(item) {
        console.log('this.areaInfo', this.areaInfo, this.areaInfo.cityId)
        return item.cityId === this.areaInfo.cityId
      },
      handleSearchCancel() {
        this.searchValue = ''
        this.searchList = []
        this.disdingwei = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page,
  .choice-area-page {
    height: 100vh;
    overflow-y: hidden;
    box-sizing: border-box;
    .city-search {
      // padding: 20rpx 20rpx 30rpx 20rpx;
      position: relative;
      padding: 20rpx;
      .search-cancel {
        position: absolute;
        top: 24rpx;
        right: 20rpx;
        text-align: center;
        width: 130rpx;
        height: 68rpx;
        line-height: 68rpx;
        background: linear-gradient(135deg, #55baff 0%, #34f6af 100%);
        border-radius: 20rpx;
        color: #fff;
        font-size: 28rpx;
      }
    }
    .city-dw {
      // padding: 0 0 30rpx 20rpx;
      padding: 0 0 30rpx 0;
      .title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 29rpx;
      }
      .dw-item {
        margin-right: 18rpx;
      }
      .text {
        width: 160rpx;
        line-height: 56rpx;
        text-align: center;
        border: 2rpx solid #dcdcdc;
        border-radius: 6rpx;
        padding: 0 15rpx;
        margin-right: 18rpx;
        color: #999999;
        font-size: 28rpx;
      }
    }
    .city-list {
      position: relative;
      width: 100%;
      height: calc(100% - 108rpx);
      // max-height: 1181rpx;
      overflow-y: auto;
      // padding: 30rpx 0;
      background: #fff;
      box-sizing: border-box;
      .city-list-box {
        padding: 30rpx 20rpx 0 20rpx;
        .city-item {
          flex-wrap: wrap;
          .letter-header {
            width: 100%;
            font-size: 28rpx;
            display: flex;
            margin-bottom: 30rpx;
            .item {
              width: 44rpx;
              height: 44rpx;
              line-height: 44rpx;
              background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
              border-radius: 50%;
              text-align: center;
              color: #fff;
              font-size: 28rpx;
            }
            /deep/ .block-area-item .block-area {
              margin-right: 20rpx;
              margin-bottom: 25rpx;
            }
          }
          .city-div {
            width: 170rpx;
            padding: 0 15rpx;
            height: 56rpx;
            line-height: 56rpx;
            border: 2rpx solid #dcdcdc;
            border-radius: 6rpx;
            margin-bottom: 25rpx;
            text-align: center;
            margin-right: 20rpx;
            // :nth-child(3n) {
            //   margin-right: 0;
            // }
            .city {
              display: inline-block;
              width: 170rpx;
              font-size: 28rpx;
              color: #999999;
            }
          }
        }
      }
      &.hasSearchResult {
        padding-top: 25rpx;
        padding-bottom: 0;
      }
      .search-result {
        padding: 0 20rpx;
      }
      .letters {
        position: fixed;
        right: 10rpx;
        width: 60rpx;
        color: #3bc5d2;
        top: 28%;
        text-align: center;
        font-size: 24rpx;
        font-weight: 510;
      }
    }
    .mask {
      position: fixed;
      z-index: 3;
      top: 40%;
      left: 40%;
      .mask-r {
        height: 120rpx;
        width: 120rpx;
        border-radius: 60rpx;
        display: flex;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        justify-content: center;
        align-items: center;
        font-size: 40rpx;
        color: #ffffff;
      }
    }
    .search-noData {
      width: 100%;
      height: 100vh;
      margin-top: 208rpx;
      .tip {
        font-size: 26rpx;
        color: #999999;
        margin-top: 25rpx;
      }
    }
    .mb25 {
      margin-bottom: 25rpx !important;
    }
  }
</style>
